<template>
    <v-container>
        <v-table dark v-if="rankList !== null">
            <thead>
            <tr>
                <th class="text-center">{{$t('rank.rank')}}</th>
                <th class="text-center">{{$t('rank.team')}}</th>
                <th class="text-center">{{$t('rank.score')}}</th>
                <th class="text-center" v-bind:key="index" v-for="(header,index) in rankHeader.value">
                    {{header}}
                </th>
            </tr>
            </thead>
            <tbody class="text-center">
            <tr v-for="(item, key) in rankList" :key="item.ID">
                <td>{{key + 1}}</td>
                <td>{{item.TeamName}}</td>
                <td>{{api.FormatFloat(item.Score)}}</td>
                <td :key="index" v-for="(gameBox, index) in item.GameBoxStatus">
                    <v-icon color="green lighten-2" v-if="!gameBox.IsDown && !gameBox.IsAttacked">mdi-check-circle</v-icon>
                    <v-icon color="yellow lighten-2" v-if="gameBox.IsDown">mdi-file-cancel</v-icon>
                    <v-icon color="red lighten-2" v-if="gameBox.IsAttacked">mdi-ghost</v-icon>
                </td>
            </tr>
            </tbody>
        </v-table>
        <v-skeleton-loader v-else class="mx-auto" type="article"></v-skeleton-loader>
    </v-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import api from '@/utils/api.js'

let timer = null
const rankHeader = ref([])
const rankList = ref([])

onMounted(() => {
            getRank()
            timer = setInterval(getRank, 5000)
        })

onUnmounted(()=> {
            clearInterval(timer)
        })


function getRank() {
                api.GET('/team/rank').then(res => {
                    rankHeader.value = res.Title
                    rankList.value = res.Rank
                })
            }
</script>

<style scoped>
    .logo {
        float: left;
        width: 50px;
        height: 50px;
    }
</style>